
import React, { Component,  } from 'react'
import PropTypes from 'prop-types'
import ReactDom,{render} from 'react-dom'

/**
* 弹出对话框
* 
*/
class Custom extends Component{
  static defaultProps = {
    title: 'tip',
    btnTxt:'ok',
    cancelTxt:'cancel',
    cancel : true, // 是否显示取消按钮
    message:'',
    ok:()=>{},
    cancelCb:()=>{},// 取消按钮的回调

  }
  render(){
    let {title,ok,btnTxt,cancelTxt,cancelCb,cancel,message,component} = this.props
    return(
      <div className="lwui_dialog">
        <div className="lwui_dialog_hd">
          <strong className="lwui_dialog_title" dangerouslySetInnerHTML={{__html:title}}></strong>
        </div>
        <div className="lwui_dialog_bd" dangerouslySetInnerHTML={{__html:message}}></div>
        {component||null}
        <div className="lwui_dialog_ft">
          {
            cancel?(
              <a className="lwui_btn_dialog default" onClick={()=>{
                dialog.hide()
                cancelCb()
              }}>{cancelTxt}</a>
            ):null
          }
          <a className="lwui_btn_dialog primary" onClick={()=>{
            dialog.hide()
            ok()
          }}>{btnTxt}</a>
        </div>
      </div>
    )
  }
}
class DialogLayer extends Component{
  static defaultProps = {
    dialog: {
      mask_style:{}
    }
  }
  render(){
    let {dialog} = this.props
    let {mask_style} = dialog;
    return (
      <div className="lwui_dialog_confirm">
        <div className="lwui_mask" style={mask_style}></div>
        <Custom {...dialog}></Custom>
      </div>
    )
  }
}
const dialog = (()=>{
  let divKey='div_dialog_'
  return {
    show:(obj)=>{
      let div = document.getElementById(divKey)
      if(!div){
        let div = document.createElement('div')
        div = document.createElement('div')
        div.id = divKey
        document.body.appendChild(div);
        render(<DialogLayer dialog={obj} />,div)
      }
    },
    hide:(key)=>{
      let div = document.getElementById(divKey)
      if(div){
        ReactDom.unmountComponentAtNode(div)
        document.body.removeChild(div);
      }
    }
  }
})()
export default dialog
